<template>
	<view class="pt-1">
		<view class="money-box flex">
			<view style="display: flex;">
				<view style="font-size: 30rpx;flex: 1;">账户余额</view>
				<view style="font-size: 40rpx;">￥{{money}}</view>
			</view>
			<view style="display: flex;margin-top: 20rpx;padding:0  30rpx;">
				<view style="font-size: 25rpx;flex: 1;">充值时长</view>
				<view style="font-size: 30rpx;">{{score}}</view>
			</view>
		</view>
		
		<view class="cz-box">
			<view class="cz-title">充值</view>
			<view class="cz-list">
				<block  v-for="(item, index) in rechargeList">
					<view :class="activeId == item.id ? 'cz-item-active' : 'cz-item'" v-if="item.id!=0"  @click="bindMoneyType(item)">
						<view class="cz-money">{{item.money}}</view>
						<view class="cz-give">{{item.wenan}}</view>
					</view>
					<view class="cz-item-cover" v-if="item.id==0" >
					<!-- 	<view class="cz-money">{{item.money}}</view>
						<view class="cz-give">{{item.duration}}</view> -->
					</view>
				</block>
				
			</view>
		</view>
		
		<view class="btn-box" @click="goRecharge">立即充值</view>
		<view class="btn-box" style="background: #E6E6E6!important;margin-top: 20rpx !important;" @click="backMoney">立即退款</view>
		
		<view class="btn-box zdmx-box" @click="moneyDetail">账单明细</view>
	</view>
</template>

<script>
	import {rechargeWechat, postBackMoney, getUserInfo
	} from '@/api/user.js'
	import {
		wechatAuth
	} from '../../api/public.js'
	import { discountlist,getscore } from "../../api/home.js"
	export default {
		data() {
			return {
				money:0.0, 
				score:"0",
				number:'',
				activeId:null,
				discount_id:null,
				rechargeList:[
				
				]
			}
		},
		onLoad() {
		},
		onShow() {
			this.getInfo();
			this.discountlist();
		},
		methods: {
			bindMoneyType(item){
				console.log(item);
				this.activeId=item.id;
				this.discount_id=item.id
				this.number=item.money
			},
			getInfo(){
				var data={
					uid:uni.getStorageSync('uid')
				}
				getUserInfo(data).then(res=>{
					if(res.data.code==1){
						this.money=res.data.data.money
						this.score=res.data.data.score
						uni.setStorageSync('userInfo',res.data.data)
					}
				})
			},
			discountlist(){
				var data={
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}
				discountlist(data).then(res=>{
					console.log(res);
					if(res.data.code==1){
						let resultData=res.data.data;
						
						console.log(resultData.length%3);
						if(resultData.length/3!=0){
								let buweiNum=3-(resultData.length%3);
								for (var i = 0; i < buweiNum; i++) {
									resultData.push({
										id:0
									})
								}
						}
						this.rechargeList=resultData
					}
				})
			},
			moneyDetail() {
				uni.navigateTo({
					url: "/pages/user/recharge-log"
				})
			},
			
			bindNumber(e){
				console.log(e);
				this.number=e.detail.value
			},
			
			// 立即充值
			goRecharge(){
				if(!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: "/pages/user/login",
						success() {
							uni.showToast({
								title: "请登录",
								icon: "none"
							})
						}
					})
					return
				}
				
				if(uni.getStorageSync('userInfo').mobile == '') {
					uni.navigateTo({
						url: "/pages/user/bind-phone",
						success() {
							uni.showToast({
								title: "请绑定手机号",
								icon: "none"
							})
						}
					})
					return
				}
				if(uni.getStorageSync('userInfo').openid ==null||uni.getStorageSync('userInfo').openid =="") {
					uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '请绑定微信号',
								confirmText:"去绑定",
								success: function (res) {
									if (res.confirm) { 
										let data={
											uid:uni.getStorageSync('uid'),
											phone:uni.getStorageSync('userInfo').mobile
										}
										
										wechatAuth(data).then(res => {
											if (res.data.code == 1) {
												var url = res.data.data.url;
												location.href = url
											}
										})
									} else if (res.cancel) {
										
									}
								}
							});
					return;
				}
			
				// if(this.number <= 0&&this.discount_id!=null) {
				// 	uni.showToast({
				// 		title: "充值金额必须大于0",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if(this.discount_id==null) {
					uni.showToast({
						title: "未选择充值金额",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: ''
				});
				var data={
					uid:uni.getStorageSync('userInfo').id,
					number:this.number,
					discount_id:this.discount_id ,
				}
				rechargeWechat(data).then(res=>{
					if (res.data.code == 1) {
						uni.hideLoading();
						var wxconfig=res.data.data
						// this.callPay(wxconfig)
						this.onBridgeReady(wxconfig)
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: ''
						})
					}
					
				})
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				var that = this;
				if (!response.package) {
					return;
				}
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: response.timeStamp,
					nonceStr: response.nonceStr,
					package: response.package,
					signType:  response.signType,
					paySign:  response.paySign ,
					success: function (res) {
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(function() {
							uni.hideLoading();
							uni.redirectTo({
								url: '/pages/home/paySuccess',
								  fail: function(res) {
										alert(JSON.stringify(res));
								  }
							})
						}, 1000);
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showLoading({
							title: '支付失败'
						});
						uni.hideLoading();
					}
				});
				// WeixinJSBridge.invoke(
				// 	'getBrandWCPayRequest', {
				// 		"appId": response.appId, //公众号名称，由商户传入
				// 		"timeStamp": response.timeStamp, //时间戳，自1970年以来的秒数
				// 		"nonceStr": response.nonceStr, //随机串
				// 		"package": response.package,
				// 		"signType": response.signType, //微信签名方式：
				// 		"paySign": response.paySign //微信签名
				// 	},
				// 	function(res) {
				// 		if (res.err_msg === "get_brand_wcpay_request:ok") {
				// 			// 使用以上方式判断前端返回,微信团队郑重提示：
				// 			//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				// 			uni.showLoading({
				// 				title: '支付成功'
				// 			});
				// 			setTimeout(function() {
				// 				uni.hideLoading();
				// 				that.getInfo();
				// 				uni.switchTab({
				// 					url:'/pages/user/index'
				// 				})
				// 			}, 1000);
				// 		} else {
				// 			uni.hideLoading();
				// 		}
				// 		WeixinJSBridge.log(response.err_msg);
				// 	}
				// );
			},
			
			// 立即退换
			backMoney() {
				uni.showModal({
					title: "确认退款",
					content: "账户余额将全部原路退回您的账户",
					cancelText: '否',
					confirmText: '是',
					success: function (res) {
					    if (res.confirm) {
							let data = new Object();
							data.uid = uni.getStorageSync('uid');
					        postBackMoney(data).then(res2 => {
								if(res2.data.code == 1) {
									uni.showToast({
										title: res2.data.msg,
										icon: 'success'
									})
									setTimeout(() => uni.navigateBack(), 1200)
								} else {
									uni.showToast({
										title: res2.data.msg,
										icon: 'none'
									})
								}
							})
					    }
					}
				})
			}
			 
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
.money-box {
	width: 670rpx;
	height: 200rpx;
	margin: 30rpx auto;
	padding: 40rpx 60rpx;
	box-sizing: border-box;
	background-color: #8d6bfe;
	border-radius: 10rpx;
	color: #FFFFFF;
	background-image: url(../../static/images/user-bg.png);
	background-repeat: repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
}
.ipt-box {
	width: 670rpx;
	height: 80rpx;
	border-radius: 10rpx;
	border: solid 1rpx #e4e4e4;
	margin: 0 auto;
	margin-top: 50rpx;
}
.ipt-box input {
	width: 100%;
	height: 100%;
	padding: 0 15rpx;
}
.btn-box {
	width: 670rpx;
	height: 90rpx;
	border-radius: 45rpx;
	margin: 0 auto;
	font-size: 30rpx;
	text-align: center;
	line-height: 90rpx;
	color: #FFFFFF;
	margin-top: 50rpx;
	
	background: linear-gradient(90deg,#0DE3AC,#98E05F);
	border-radius: 39px;
}

.zdmx-box {
	background: transparent !important;
	color: #05BD03 !important;
	margin-top: 10rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 69rpx;
}

	.cz-title{
/* 		width: 56px;
		height: 28px; */
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 69rpx;
	}
	.cz-item-cover{
		display: flex;
		width: 210rpx;
		height: 111rpx;
		border:transparent;
		border-radius: 4rpx;
		margin-top: 20rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.cz-item{
		display: flex;
		width: 210rpx;
		height: 111rpx;
		border: 2px solid #DCDCDC;
		border-radius: 4rpx;
		margin-top: 20rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.cz-item:not(:nth-child(3n)) {
          margin-right: calc(3% / 3);
		  justify-content: flex-start
	}
	.cz-item-active{
		display: flex;
		width: 210rpx;
		height: 111rpx;
		border-radius: 4rpx;
		margin-top: 20rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 2px solid #05BD03;
	}
	.cz-money{
/* 		width: 61rpx;
		height: 27rpx; */
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #05BD03;
		line-height: 60rpx;
	}
	.cz-give{
		text-align: center;
 		width: 174rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.cz-list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	
	}
	.cz-box{
		margin: 30rpx 40rpx;
	}
</style>
